@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-color: #0e81d8;
  color: #fff;
  font-family: 'Roboto Mono', sans-serif;
  display: flex;
  align-items: center; /*将容器元素内部的子元素在垂直方向上居中对齐。*/
  justify-content: center; /*将容器元素内部的子元素在水平方向上居中对齐。*/
  height: 100vh; /*vh是视口单位，表示视口高度，100vh是元素高度占据整个视口的高度*/
  overflow: hidden;
  margin: 0;
}

.counter-container {
  display: flex; /*实现计数器元素在垂直方向上的居中对齐效果以及容器内部文本内容的水平居中对齐效果。*/
  flex-direction: column;/*让container中每一个元素在垂直方向上对齐*/
  justify-content: center; /*实现计数器元素在垂直方向上的居中对齐效果。*/
  text-align: center; /*每一个元素水平居中对齐*/
  margin: 30px 50px;
}

.counter {
  font-size: 60px;
  margin-top: 10px;
}

/*媒体查询，页面缩小时，页面布局能改变为垂直排列的方式*/
@media (max-width: 580px) {  
  body {
    flex-direction: column;
  }
}